メルペイご利用上の注意
ボタンウィジェットについて
メルペイでは決済用のボタンを提供しています。
メルペイで支払うことをお客様に明確に案内するため、加盟店様サイトに決済用のボタンを設置することを推奨しています。
決済用のボタンを設置する場合、お客様が混乱しないよう、ボタンデザインの変更は禁止されています。
ボタンウィジェット設置方法
1. ボタンを表示させたい全てのページの<head>タグ内で<script>タグを使用してJSファイルを読み込みます
<head>
<script async="async" src="https://netpayment.merpay.com/sdk/widget.js"> </script>
</head>
サンプルの例では非同期属性を使用しています。非同期属性によって、JSファイルはサイトのHTMLの表示と並行してバックグラウンドで読み込まれます。
2. 任意の箇所にカスタムエレメントmerpay-buttonを設置します
<body>
<merpay-button class="merpay-button"></merpay-button>
</body>
merpay-buttonは通常のHTMLタグと同じように扱うことができるため、任意の属性を追加することができます。
3. ボタンに対して購入処理を追加します
<script>
var button = document.getElementsByTagName('merpay-button')[0];
button.addEventListener('click', function () {
// 購入処理
});
</script>
ボタンのクリックイベントに対して任意の処理を追加してください。
ボタンウィジェット設置ガイド
1. クリアスペース
メルペイお支払いボタンの上下左右には、常に 8 px 以上のクリアスペースを確保する必要があります。
クリアスペースにはグラフィックスやテキストが入らないようにしてください。
設置最大サイズは312px、最小サイズは156px での使用をしてください。
2. 禁止事項
形状を変更したり、加工したりすることは、ボタンの印象を損ないます。
本ガイドラインを参考にして、間違った使い方をしないようにしてください。
メルペイ対応環境
メルペイでは下記のOS、ブラウザ、バージョンをサポートしています。
下記以外のOS、ブラウザ、ブラウザのバージョンでエラーに遭遇することなく利用できることもありますが、安全で確実なご利用のために、下記のバージョンに対応するクライアントのみアクセスを許可することを推奨しております。
またそれぞれ最新のセキュリティ更新プログラムが適用されていることをご確認いただくことを推奨しております。
対応OS、ブラウザ、バージョン以外ではボタンは非表示となります。
デスクトップPC、またはノートPC
- ・Chrome 最新バージョン
- ・Firefox 最新バージョン
- ・Internet Explorer 最新バージョン
- ・Microsoft Edge 最新バージョン
- ・Safari 11.1以上
スマートフォン
- ・Android 5以降: Google Chrome 68以降
- ・Apple iOS 9以降: Chrome Mobile for iOS 58以降
- ・Apple iOS 9以降: Mobile Safari 9以降
ワーディングルール
メルカリ・メルペイのワーディング
| Word | 定義 | 正しい表記 | 間違い例 |
|---|---|---|---|
| メルカリ | フリマアプリ「メルカリ」 | ◯ メルカリアプリでお支払い | × メルカリペイでお支払い |
| メルペイ | 「メルカリ」アプリを使ったスマホ決済サービスの名称 | ◯ メルペイでお支払い | × メルペイアプリでお支払い |
ボタンウィジェットを利用しないときの文言
| 表示箇所 | 文言 |
|---|---|
| リストラベル | メルペイ（メルカリアプリでお支払い） |
| Description ※ディスクリプションの表示がある場合 |
ご注文代金をメルカリアプリを利用してお支払いいただける決済方法です。 メルペイの残高やポイント、メルペイスマート払い（購入代金を翌月まとめてお支払いできるサービス/対象者のみ）をご利用いただけます。 ※事前にメルカリアプリのダウンロードおよび会員登録が必要になります。 |